// 源码（版权所有）：
<template>
  <div class="personalCenter">
    <el-container>
      <el-header>个人中心</el-header>
      <el-container>
        <el-aside width="400px">
          <el-col :span="12">
            <div class="sub-title"></div>
            <div class="demo-basic--circle">
              <div class="img">
                <el-avatar
                    :size="100"
                    :src="circleUrl"
                    align="center"
                ></el-avatar>
              </div>
              <div class="block">
                <span>ADMIN</span>
              </div>
            </div>
          </el-col>
          <el-input
              v-model="input1"
              type="text"
              placeholder="用户昵称"
              maxlength="6"
              show-word-limit
          ></el-input>
          <el-input
              v-model="input2"
              type="text"
              placeholder="店铺名称"
              show-word-limit
          ></el-input>
          <el-input
              v-model="input3"
              type="text"
              placeholder="店铺地址"
              show-word-limit
          ></el-input>
          <el-input
              v-model="input5"
              type="text"
              placeholder="用户姓名"
              show-word-limit
          ></el-input>
          <el-input v-model="input7" placeholder="邮箱">
            <template slot="append">@qq.com</template>
          </el-input>
          <el-input
              v-model="input8"
              type="text"
              placeholder="手机号码"
              maxlength="20"
              show-word-limit
          ></el-input>
          <el-input
              v-model="input9"
              type="text"
              placeholder="固定电话"
              maxlength="20"
              show-word-limit
          ></el-input>
          <el-button-group style="float: right; padding: 3px 0" type="text">
            <el-button type="primary" size="medium" round>保存</el-button>
          </el-button-group>
        </el-aside>
        <el-container>
          <el-main>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span style="float: left"><b>店铺信息</b></span>
                <el-button-group
                    style="float: right; padding: 3px 0"
                    type="text"
                >
                  <el-button
                      type="primary"
                      icon="el-icon-edit"
                      size="medium"
                      round
                  >
                    修改信息
                  </el-button>
                  <el-button
                      type="primary"
                      icon="el-icon-check"
                      size="medium"
                      round
                  >
                    确认修改
                  </el-button>
                </el-button-group>
              </div>
              <div v-for="o in 1" :key="o" class="text item">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column label="店铺名称" width="180">
                    <template slot-scope="scope">
                      <p>{{ scope.row.name1 }}</p>
                      <div slot="reference" class="name-wrapper"></div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)"
                      >
                        编辑
                      </el-button>
                      <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)"
                      >
                        解绑
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="更多" align="center">
                    <el-row>
                      <el-button
                          type="info"
                          icon="el-icon-message"
                          circle
                      ></el-button>
                      <el-button
                          type="warning"
                          icon="el-icon-star-off"
                          circle
                      ></el-button>
                      <el-button
                          type="share"
                          icon="el-icon-share"
                          circle
                      ></el-button>
                    </el-row>
                  </el-table-column>
                </el-table>
              </div>
              <div v-for="o in 1" :key="o" class="text item">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column label="开店时间" width="180">
                    <template slot-scope="scope">
                      <p>{{ scope.row.name2 }}</p>
                      <div slot="reference" class="name-wrapper"></div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)"
                      >
                        编辑
                      </el-button>
                      <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)"
                      >
                        解绑
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="更多" align="center">
                    <el-row>
                      <el-button
                          type="info"
                          icon="el-icon-message"
                          circle
                      ></el-button>
                      <el-button
                          type="warning"
                          icon="el-icon-star-off"
                          circle
                      ></el-button>
                      <el-button
                          type="share"
                          icon="el-icon-share"
                          circle
                      ></el-button>
                    </el-row>
                  </el-table-column>
                </el-table>
              </div>

              <div v-for="o in 1" :key="o" class="text item">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column label="店铺头像" width="180">
                    <template slot-scope="scope">
                      <p>{{ scope.row.name2 }}</p>
                      <div slot="reference" class="name-wrapper"></div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          @click="handleEdit(scope.$index, scope.row)"
                      >
                        编辑
                      </el-button>
                      <el-button
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, scope.row)"
                      >
                        解绑
                      </el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="更多" align="center">
                    <el-row>
                      <el-button
                          type="info"
                          icon="el-icon-message"
                          circle
                      ></el-button>
                      <el-button
                          type="warning"
                          icon="el-icon-star-off"
                          circle
                      ></el-button>
                      <el-button
                          type="share"
                          icon="el-icon-share"
                          circle
                      ></el-button>
                    </el-row>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
            <el-card class="box-card">
              <div>
                <span style="float: left" shadow="hover"><b>个人说明</b></span>
                <br />
                <br />
                <span>螃蟹在剥我的壳</span>
                <el-divider></el-divider>
                <span>笔记本在写我</span>
                <el-divider></el-divider>
                <p>漫天的我落在枫叶的雪花上</p>
              </div>
              <span style="float: left" shadow="hover"><p>用户满意度</p></span>
              <el-rate
                  v-model="value2"
                  :colors="colors">
              </el-rate>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  name: 'PersonalCenter',
  data() {
    return {
      text: '',
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      input6: '',
      input7: '',
      input8: '',
      input9: '',
      circleUrl:
          'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      sizeList: ['large'],
      tableData: [
        {
          date: '2016-05-03',
          name1: 'Wechat',
          name2: 'Github',
        },
      ],
    }
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
  },
}
</script>
<style>
.el-header {
  line-height: 60px;
  text-align: center;
  background-color: #b3c0d1;
}
.el-aside {
  line-height: 44px;
  text-align: center;
  background-color: #d3dce6;
}
.el-main {
  line-height: 36px;
  text-align: center;
  background-color: #e9eef3;
}

.demo-basic--circle {
  align: 'center';
  margin-top: 30px;
  margin-left: 150px;
}
.block {
  margin-left: 25px;
  font-weight: bold;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 1368px;
  border-radius: 30px;
}
</style>
